<template>
  <div class="container-wrapper">
    <BasicTable
      ref="tableRef"
      :api="getDiyParamsPage"
      :columns="columns"
      :useSearchForm="useSearchForm"
      :actionColumn="actionColumn"
    >
      <template #searchFormActions>
        <FormAction :actions="searchFormActions()" />
      </template>
      <template #actions="{ record }">
        <TableAction :actions="tableActions(record.row)" />
      </template>
    </BasicTable>
    <Modal v-model:visible="visible" :title="modalTitle" width="500px">
      <ModalForm ref="modalFormRef" :data="modalData" @success="handleSuccess" />
      <template #footer>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </template>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { BasicTable, TableAction } from '@/components/BasicTable'
import { FormAction } from '@/components/BasicForm'
import { columns, useSearchForm, actionColumn } from './index.data'
import {
  getDiyParamsPage,
  createDiyParamsPage,
  updateDiyParamsPage,
  deleteDiyParamsPage
} from '@/api/mall/promotion/diy/params'
import Modal from '@/components/Modal/index.vue'
import ModalForm from './ModalForm.vue'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const visible = ref<boolean>(false)
const modalTitle = ref<string>('新增')
const modalFormRef = ref<InstanceType<typeof ModalForm>>()
const modalData = ref<any>({})
const tableRef = ref<InstanceType<typeof BasicTable>>()

const tableActions = (row: any) => {
  return [
    {
      label: '编辑',
      type: 'text',
      onClick: () => {
        edit(row)
      }
    },
    {
      label: '删除',
      type: 'text',
      onClick: () => {
        deleteData(row)
      }
    }
  ]
}

const searchFormActions = () => {
  return [{ label: '新增', type: 'primary', onClick: () => add() }]
}

const add = () => {
  modalData.value = {}
  visible.value = true
}

const edit = (row: any) => {
  modalData.value = row
  console.log('modalData.value', modalData.value) 
  visible.value = true
}

const deleteData = (row: any) => {
  ElMessageBox.confirm('确定删除该配置吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteDiyParamsPage({
        id: row.id
      }).then(() => {
        ElMessage({
          message: '删除成功',
          type: 'success'
        })
        tableRef.value?.reload()
      })
    })
    .catch(() => {
      ElMessage({
        message: '取消删除',
        type: 'info'
      })
    })
}

const submitForm = () => {
  modalFormRef.value?.submitForm()
}

const handleSuccess = (data: any) => {
  console.log('handleSuccess', data)
  if (data.id) {
    updateDiyParamsPage(data).then(() => {
      ElMessage({
        message: '更新成功',
        type: 'success'
      })
      tableRef.value?.reload()
    })
  } else {
    createDiyParamsPage(data).then(() => {
      ElMessage({
        message: '新增成功',
        type: 'success'
      })
      tableRef.value?.reload()
    })
  }
  visible.value = false
}
</script>

<style scoped lang="scss">
.container-wrapper {
  width: 100%;
  height: 100%;
}
</style>
